import React, { useEffect } from 'react'
import requestApi from '../../config/requestApi'
import { Select   } from 'antd';

const { Option } = Select;
function Singer() {
    //歌手分类
    const singerList = [[5001, '入驻歌手'], [1001,'华语男歌手'], [1002, '华语女歌手'], [1003, '华语组合/乐队'], 
        [2001, '欧美男歌手'], [2002, '欧美女歌手'], [2003, '欧美组合/乐队'], [6001, '日本男歌手'], [6002, '日本女歌手'],
        [6003, '日本组合/乐队'], [7001, '韩国男歌手'], [7002, '韩国女歌手'], [7003,'韩国组合/乐队'], [4001, '其他男歌手'],
        [4002, '其他女歌手'], [4003, '其他组合乐队']
    ]
    useEffect(() => {
        requestApi('get','/playlist/hot').then(
            res => {
                console.log(res);
                
            }
        ).catch(
            err => {
                console.log(err);
                
            }
        )

    },[])
    function onChange(value) {
        console.log(`selected ${value}`);
        requestApi('get','/artist/list?cat='+value).then(
            res => {
                console.log(res);
                
            }
        ).catch(
            err => {
                console.log(err);
                
            }
        )
    }
      
    function onSearch(val) {
        console.log('search:', val);
    }
    return (
        <div>
            歌手
            <Select
                showSearch
                placeholder="请选择你要查询的歌手"
                optionFilterProp="children"
                onChange={onChange}
                onSearch={onSearch}
                filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                style={{width:200}}
            >
                {singerList.map((item,index) => {
                    return  <Option value={item[0]} key={index}>{item[1]}</Option>
                })}
            </Select>
            
        </div>
    )
}

export default Singer;
